<template>
  <div class="max-mask" v-if="flag"></div>
  <div class="m-layer" v-if="flag">
    <div class="zbar"><div class="zttl overtext">登录</div></div>
    <!-- <div>
      <div class="lg">
        <div class="cnt">
          <div class="main clearfix">
            <div class="phone"></div>
            <div class="right">
              <div class="title">扫码登录</div>
              <div class="qr">
                <div class="tip f-dn f-link j-flag" v-show="flag">
                  <p>二维码已失效</p>
                  <a
                    class="u-btn2"
                    href="javascript:;"
                    data-action="refresh"
                    @click="getUrl"
                    >点击刷新</a
                  >
                </div>
                <div class="canvas f-pen j-flag">
                  <img :src="QrUrl" />
                  <img alt="Scan me!" style="display: none" />
                </div>
              </div>
              <p class="txt">
                使用&nbsp;<a
                  class="download-link unline"
                  href="https://music.163.com/#/download"
                  target="_blank"
                  >网易云音乐APP</a
                >&nbsp;扫码登录
              </p>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="zcnt">
      <div class="lyct lyct-1 f-cb" id="auto-id-O6VU61uHGcrrW6Xn">
        <div class="n-log2 n-log2-2">
          <div class="f-pr" style="z-index: 5">
            <input
              type="text"
              name="e"
              class="u-txt"
              placeholder="请输入帐号"
              spellcheck="false"
              autocomplete="off"
              v-model="account"
            />
            <ul class="u-fill" style="visibility: hidden"></ul>
          </div>
          <div class="f-mgt10">
            <form>
              <input
                type="password"
                class="u-txt"
                placeholder="请输入密码"
                autocomplete="off"
                v-model="password"
              />
            </form>
          </div>

          <div class="u-err" v-if="tipFlag">
            <i class="u-icn u-icn-25"></i><span>{{ tipTxt }}</span>
          </div>
          <div class="f-mgt10">
            <label class="s-fc3"
              ><input type="checkbox" checked="checked" class="u-auto" />自动登录</label
            >
            <a
              href="//reg.163.com/getpasswd/RetakePassword.jsp"
              target="_blank"
              class="f-fr s-fc3"
              >忘记密码？</a
            >
          </div>
          <div class="f-mgt20" @mouseup="submit">
            <a class="u-btn2 u-btn2-2" hidefocus="true" href="#" data-action="login"
              ><i class="u-btn2">登录</i></a
            >
          </div>
        </div>
        <!-- <div class="n-loglink2">
          <a href="javascript:;" class="s-primary">&lt;&nbsp;&nbsp;其他登录方式</a>
        </div> -->
      </div>
    </div>
    <span class="zcls" title="关闭窗体" @mouseup="close">×</span>
  </div>
</template>

<script>
import { toRef, ref } from "vue";
import { useStore } from "vuex";
import { getLoginFn } from "@/api/index.js";

export default {
  name: "LoginDialog",
  setup() {
    const store = useStore();
    let flag = toRef(store.state.Login, "flag");
    let account = ref(null);
    let password = ref(null);
    let tipFlag = ref(false);
    let tipTxt = ref(null);
    function submit() {
      tipFlag.value = false;
      getLoginFn(account.value, password.value)
        .then((response) => {
          console.log(response);
          if (response.data.code >= 200 && response.data.code < 300) {
            store.commit("Login/changeLoginFlag", true);
            store.commit("Login/changeFlag", false);
            store.commit("Login/changeCookie", response.data.cookie);
          } else {
            tipFlag.value = true;
            tipTxt.value = response.data.message;
          }
        })
        .catch((err) => {
          console.log(err);
          tipFlag.value = true;
          tipTxt.value = "账号或密码错误";
        });
    }

    function close() {
      store.commit("Login/changeFlag", false);
    }

    return {
      flag,
      account,
      password,
      submit,
      tipFlag,
      tipTxt,
      close
    };
  },
};
</script>

<style scoped lang="less">
.max-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.m-layer {
  position: absolute;
  top: 100px;
  left: 300px;
  z-index: 9998;
  width: 530px;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
  border: 1p solid red;
  z-index: 2000;
  border: none;
  background: #fff;
  .zbar {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
    background: #2d2d2d;
  }
  .zttl {
    padding-right: 45px;
    margin: 0;
    height: 38px;
    line-height: 38px;
    padding-left: 18px;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    background-position: 50% 0;
    cursor: move;
  }
  .zcls {
    position: absolute;
    z-index: 20;
    top: 16px;
    right: 20px;
    width: 10px;
    height: 10px;
    line-height: 20px;
    overflow: hidden;
    text-indent: -9999px;
    background: url("../../common/images/layer.png") no-repeat 0 -95px;
    cursor: pointer;
  }
  .zcnt {
    padding: 0;
    border: 1px solid #878787;
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
    background: #fff;
  }
}
.n-log2-2 {
  padding: 30px 0 43px;
  width: 220px;
  margin: 0 auto;
}
.u-txt {
  width: 206px;
  height: 19px;
  margin: 0;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
  box-sizing: content-box;
}
.f-mgt10 {
  margin-top: 10px;
}
.u-err {
  margin-top: 5px;
  height: auto;
  line-height: 18px;
  i {
    margin-top: -2px;
    margin-right: 8px;
  }
}
.u-icn-25 {
  display: inline-block;
  margin-top: -2px;
  margin-right: 8px;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  background-position: -50px -270px;
}
.f-mgt10 {
  margin-top: 10px;
}
.u-auto {
  margin: 0 12px 0 0;
  vertical-align: middle;
}
.f-fr {
  float: right;
}
.f-mgt20 {
  margin-top: 20px;
}
.u-btn2-2 {
  display: inline-block;
  padding: 0 5px 0 0;
  width: 215px;
  height: 31px;
  line-height: 31px;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background-position: right -428px;
  i {
    display: inline-block;
    width: 180px;
    color: #fff;
    background-position: 0 -387px;
    padding: 0 15px 0 20px;
    pointer-events: none;
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
  }
}
.u-fill {
  position: absolute;
  top: 31px;
  left: 0;
  width: 218px;
  background: #fff;
  border: 1px solid #ccc;
}
// .lg {
//   min-height: 332px;
//   text-align: center;
//   .cnt {
//     margin: 0 auto;
//     padding: 38px 0 20px;
//     text-align: center;
//   }
//   .main {
//     position: relative;
//     margin: 0 auto;
//     text-align: center;
//     .tip {
//       position: absolute;
//       top: 0;
//       left: 0;
//       display: block;
//       width: 100%;
//       height: 100%;
//       background: rgba(255, 255, 255, 0.9);
//       z-index: 1;
//       font-size: 14px;
//       a {
//         display: block;
//         margin: 0 auto;
//         padding: 0 5px 0 0;
//         white-space: nowrap;
//         width: 64px;
//         height: 24px;
//         line-height: 24px;
//         text-align: center;
//         border-radius: 4px;
//         background: linear-gradient(180deg, #81dd81 0%, #55a055 100%);
//         border: 1px solid #5baf5b;
//         box-shadow: inset 0 -1px 1px 1px rgb(185 230 185 / 31%);
//         color: #fff;
//         font-size: 12px;
//       }
//       P {
//         margin: 45px auto 6px;
//         font-size: 12px;
//         color: rgba(0, 0, 0, 0.8);
//         font-weight: 500;
//       }
//     }
//     .phone {
//       float: left;
//       margin-left: 101px;
//       width: 125px;
//       height: 220px;
//       background: url("../../common/images/qr_guide.png") no-repeat;
//       background-size: contain;
//     }
//     .qr {
//       position: relative;
//       width: 130px;
//       height: 130px;
//       padding: 4px;
//       margin: 13px auto;
//       background: #fff;
//       img {
//         width: 140px;
//         height: 140px;
//       }
//     }
//     .txt {
//       font-size: 12px;
//       top: 181px;
//       width: 200px;
//       right: -15px;
//       left: auto;
//       line-height: 17px;
//       color: rgba(0, 0, 0, 0.4);
//     }
//   }
//   .right {
//     float: left;
//     margin-left: 25px;
//     .title {
//       font-size: 18px;
//       font-weight: 500;
//       text-align: center;
//     }
//   }
// }
// .download-link {
//   color: #0c73c2;
// }
</style>
